<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        React: { useMemo }
      } = window;

      run(async function () {
        const avatarMiddleware = () => next => (...args) => {
          const [{ activity }] = args;

          if (activity.id === '3.0') {
            return () => <div className="custom-avatar">Bot</div>;
          }

          return next(...args);
        };

        const directLine = await testHelpers.createDirectLineWithTranscript([
          {
            from: { role: 'bot' },
            id: '1.0',
            text: 'Labore ut ad nulla nulla eiusmod duis dolore ut laborum cupidatat est amet veniam sit.',
            timestamp: -300001,
            type: 'message'
          },
          {
            channelData: { state: 'sent' },
            from: { role: 'user' },
            id: '2.0',
            text: 'Sint labore fugiat ea minim do reprehenderit sunt exercitation.',
            timestamp: -300001,
            type: 'message'
          },
          {
            from: { role: 'bot' },
            id: '3.0',
            text: 'Custom avatar is not available if gutter is not shown.',
            timestamp: 0,
            type: 'message'
          }
        ]);

        WebChat.renderWebChat(
          {
            avatarMiddleware,
            directLine,
            store: testHelpers.createStore(),
            styleOptions: {
              botAvatarInitials: undefined,
              bubbleBackground: '#0063B1',
              bubbleBorderColor: '#0063B1',
              bubbleBorderRadius: 4,
              bubbleFromUserBackground: '#0063B1',
              bubbleFromUserBorderColor: '#0063B1',
              bubbleFromUserBorderRadius: 4,
              bubbleFromUserNubOffset: 0,
              bubbleFromUserNubSize: 10,
              bubbleFromUserTextColor: 'White',
              bubbleNubOffset: 0,
              bubbleNubSize: 10,
              bubbleTextColor: 'White',
              groupTimestamp: false,
              userAvatarInitials: undefined
            }
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await host.snapshot('local');
      });
    </script>
  </body>
</html>
